<template>
  <div id="cesiumContainer"></div>
</template>
<script setup>
import * as Cesium from "cesium";
import TOKEN from "@/utils/cesium/token.js";


onMounted(() => {

}),


onMounted(() => {
  Cesium.Ion.defaultAccessToken = TOKEN;

  // 实例化
  const viewer = new Cesium.Viewer("cesiumContainer", {
    // 界面控件 全部关闭
    timeline: false, // 时间轴控件
    animation: false, // 动画控件
    geocoder: false, // 搜索按钮
    homeButton: false, // 主页按钮
    sceneModePicker: false, // 投影方式按钮
    baseLayerPicker: false, // 图层选择按钮
    navigationHelpButton: false, // 帮助手势按钮
    fullscreenButton: false, // 全屏按钮
  });
  // 隐藏版权信息
  viewer.cesiumWidget.creditContainer.style.display = "none";
  // style 6-影像 7-矢量 8-标注
  var aMapProvider = new Cesium.UrlTemplateImageryProvider({
    url: "https://webst0{s}.is.autonavi.com/appmaptile?style=7&x={x}&y={y}&z={z}&lang=zh_cn&size=1",
    subdomains: ["1", "2", "3", "4"], // 如果有多个子域名用于负载均衡，可以在这里指定
    tilingScheme: new Cesium.WebMercatorTilingScheme(),
    minimumLevel: 3,
    maximumLevel: 18, // 根据高德地图的实际最大层级设置
  });
  // 将高德地图添加到Cesium Viewer中
  viewer.imageryLayers.addImageryProvider(aMapProvider);

  // 设置初始位置  Cesium.Cartesian3.fromDegrees(longitude, latitude, height, ellipsoid, result)
  const boundingSphere = new Cesium.BoundingSphere(
    Cesium.Cartesian3.fromDegrees(114.30527350657182, 30.59595484998685, 0),
    100
  );
  // 定位到初始位置
  viewer.camera.flyToBoundingSphere(boundingSphere, {
    // 定位到初始位置的过渡时间，设置成0，就没有过渡，类似一个过场的动画时长
    duration: 3,
  });

  const imageUrl = "/src/assets/image/position.png";
  const billBoard1 =  viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(
      114.30527350657182,
      30.59595484998685,
      0
    ),
    billboard: {
      image: imageUrl,
      color: Cesium.Color.RED,
      scale: 0.2,
    },
    label: {
      text: "肖总",
      font: "20px",
      color: Cesium.Color.RED,
      pixelOffset: new Cesium.Cartesian2(0, -40),
      fillColor: Cesium.Color.BLUE,
      showBackground: false,
      backgroundColor: Cesium.Color.RED,
    },
  });

  viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(
      114.26522916206015,
      30.59026470545458,
      0
    ),
    billboard: {
      image: imageUrl,
      color: Cesium.Color.RED,
      scale: 0.2,
    },
    label: {
      text: "小沈",
      font: "20px",
      color: Cesium.Color.RED,
      pixelOffset: new Cesium.Cartesian2(0, -40),
      fillColor: Cesium.Color.BLUE,
      showBackground: false,
      backgroundColor: Cesium.Color.RED,
    },
  });

  viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(
      114.36687292429713, 30.573724426095062 ,
      0
    ),
    billboard: {
      image: imageUrl,
      color: Cesium.Color.RED,
      scale: 0.2,
    },
    label: {
      text: "花总",
      font: "20px",
      color: Cesium.Color.RED,
      pixelOffset: new Cesium.Cartesian2(0, -40),
      fillColor: Cesium.Color.BLUE,
      showBackground: false,
      backgroundColor: Cesium.Color.RED,
    },
  });

  // const handelCartesian2ToCartesian3 = () => {
  //   let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
  //   handler.setInputAction(function (event) {
  //     const cartesian2 = event.position;
  //     console.log("屏幕坐标（平面坐标系cartesian2）", event.position);
  //     const cartesian3 = viewer.scene.globe.pick(
  //       viewer.camera.getPickRay(cartesian2),
  //       viewer.scene
  //     );
  //     console.log("空间坐标系（笛卡尔坐标系cartesian3）", cartesian3);

  //     function fn02(cartesian3) {
  //       // 1. 笛卡尔坐标 转弧度坐标
  //       const cartographic = Cesium.Cartographic.fromCartesian(cartesian3);
  //       console.log("弧度坐标 cartographic", cartographic);
  //       // 2. 弧度坐标转（角坐标）经纬度、高度
  //       const longitude = Cesium.Math.toDegrees(cartographic.longitude);
  //       const latitude = Cesium.Math.toDegrees(cartographic.latitude);
  //       // 3. 得到 经度、纬度、高度
  //       console.log(longitude, latitude, cartographic.height);
  //       return { longitude, latitude, height: cartographic.height };
  //     }
  //     console.log(fn02(cartesian3));
  //   }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
  // };
  // handelCartesian2ToCartesian3();
});
</script>

<style scoped>
#cesiumContainer {
  width: 100%;
  height: 100%;
}
</style>
